<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>routes</title>
    <script src='vue/vue.js'></script>
    <script src='vue/vue-router.js'></script>
</head>

<body>
    <div id="app">
        <h1>Hellon APP</h1>
        <p>
            <router-link to='/foo'>go to foo</router-link>
            <router-link to='/bar'>go to bar</router-link>
            <router-link to='/user'>go to user</router-link>
        </p>
        <router-view></router-view>
    </div>
    <script>
        const Foo = {
            template: '<div>foo</div>'
        }
        const Bar = {
            template: '<div>bar</div>'
        }
        const UserProfile = {
            template: '<div>UserProfile</div>'
        }
        const UserPosts = {
            template: '<div>UserPosts</div>'
        }
        const User = {
            template: `
            <div class="user">
                <h2>User {{ $route.params.id }}</h2>
                <router-link to='/posts'>go to User posts</router-link>
                <router-view></router-view>
            </div>
            `
        }
        const routes = [{
                path: '/foo',
                component: Foo
            },
            {
                path: '/bar',
                component: Bar
            },
            {
                path: '/user',
                component: User
            }
        ]
        const router = new VueRouter({
            routes: [{
                path: '/user',
                component: User,
                children: [{
                        path: '',
                        component: UserProfile
                    },
                    {
                        path: '/posts',
                        component: UserPosts
                    }
                ]
            }]
        })
        var app = new Vue({
            router
        }).$mount('#app')
    </script>
</body>

</html>